<template>
  <el-container>
    <el-header><h2>留言管理</h2></el-header>
    <el-main>
      <hr>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row>
            <el-col :span="12">
              <h3 v-if="params.condition.visible === 1">已审核留言：</h3>
              <h3 v-if="params.condition.visible !== 1">未审核留言：</h3>
            </el-col>
            <el-col :span="12">
              <p style="text-align: right">
                <el-button type="primary" @click="boardMessageQuery(1)">已审核</el-button>
                <el-button type="success" @click="boardMessageQuery(0)">未审核</el-button>
              </p>
            </el-col>
          </el-row>
        </div>
        <el-table :data="content">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form class="demo-table-expand" inline label-position="left">
                <el-form-item label="内容：">
                  <span>{{ props.row.content }}</span><br>
                  <!--              <span>{{props.row.uuid}}</span>-->
                </el-form-item>
                <br>
                <span style="float: right">
                <el-button plain type="primary" @click="changeVisibility(props.row.uuid)">修改显示状态</el-button>
                <el-button plain type="danger" @click="deleteBoardMessage(props.row.uuid)">删除</el-button>
              </span>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="subject"></el-table-column>
          <el-table-column label="作者" prop="author"></el-table-column>
          <el-table-column label="内容" prop="intercept"></el-table-column>
          <el-table-column label="时间" prop="timestamp.timeString"></el-table-column>
          <el-table-column label="状态" prop="status"></el-table-column>
        </el-table>
      </el-card>
    </el-main>
    <el-footer>
      <el-pagination
          :current-page.sync="params.page"
          :page-size.sync="params.size"
          :total="total"
          background
          layout="prev, pager, next,jumper"
          @current-change="boardMessageQuery()"
      >
      </el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
import {delBoardMessage, MessageBoardVisible, pageBoardMessage} from "../../network/messageBoardApi";

export default {
  name: "boardManagement",
  data() {
    return {
      params: {
        page: 1,
        size: 10,
        condition: {
          visible: 0
        }
      },
      content: [],
      total: 0
    }
  },
  methods: {
    deleteBoardMessage(uuid) {
      delBoardMessage({id: uuid}).then(res => {
        console.log(res)
        if (res.code === 2000 && this.params.condition.visible !== 1) {
          this.boardMessageQuery()
        } else {
          this.boardMessageQuery(1)
        }
      })
    },
    boardMessageQuery(visible) {
      pageBoardMessage(this.params, this.params.condition.visible = visible).then(res => {
        console.log(res, visible)
        this.content = res.data.records
        this.total = res.data.total;
        let str = res.data.records;
        for (let i = 0; i < str.length; i++) {
          str[i].intercept = str[i].content.substring(0, 12) + "..."
          str[i].status = str[i].visible ? "已审核" : "未审核"
        }
      })
    },
    changeVisibility(uuid) {
      MessageBoardVisible({id: uuid}).then(res => {
        console.log(res)
        if (res.code === 2000 && this.params.condition.visible !== 1) {
          this.boardMessageQuery()
        } else {
          this.boardMessageQuery(1)
        }
      })
    }
  },
  mounted() {
    this.boardMessageQuery()
  }

}
</script>

<style scoped>

</style>